import React from 'react';
import {
    connect
} from 'dva';
import Modal from '../../components/Sideslip/Sideslip';
import Map from '../../components/map/index';
import {Card,Row, Col, message} from 'antd';
import moment from 'moment';

class PersonalModal extends React.Component {
    state = {
        peopleArr: [{
            fid: 1,
            name: '123'
        }, {
            fid: 2,
            name: '345'
        }, {
            fid: 3,
            name: '578'
        }]
    }

    closeModal = () => {
        this.props.operateModal();
        this.setState({
            serviceTime: null,
            people: null
        });
    }
    submit = () => {
        if (!this.state.people) {
            message.warning('请选择服务人员');
            return;
        }
        if (!this.state.serviceTime) {
            message.warning('请选择时间');
            return;
        }
    }
    render() {
        const {
            data
        } = this.props;
        let mapMarkers = [];
        if (data) {
            if(this.props.data.fStratPosition || this.props.data.fStratPosition) {
              mapMarkers.push(formatPosition(this.props.data.fStratPosition, 0));
            }
            let end = formatPosition(this.props.data.fEndPosition, 1);
            if (end.position) {
                mapMarkers.push(end);
            }
        }
        if (!data) {
            return null
        }
        return ( <Modal visable = {this.props.visable} closeModal = {this.closeModal} >
              <Row>
                <p style = {{fontSize: 15,fontWeight: 'bold'}} > 服务详情 </p> 
              </Row> 
              <Row style = {{padding: '5px 20px'}} >
                <Card>
                  {data.fState === 'a3eec264faeb4d95843ce0bd6268a162' ? null : 
                    <Row style = {{paddingBottom: '10px'}} >
                      <Col span = {4}>
                        <span > 服务时间: </span> 
                      </Col> 
                      <Col span = {20} >
                        <span > {moment(data.fStartTime).format('YYYY-MM-DD HH:mm')} </span> 
                      </Col> 
                    </Row>
                }
                   
                  <Row style = {{paddingBottom: '10px'}} >
                    <Col span = {4} >
                      <span > 街办社区: </span> 
                    </Col> 
                    <Col span = {20} >
                      <span > {data.fStreetCommunity} </span> 
                    </Col> 
                  </Row> 
                  <Row style = {{ paddingBottom: '10px'}} >
                    <Col span = {4} >
                      <span> 服务内容: </span> 
                    </Col> 
                    <Col span = {20} >
                      <span > {data.fServiceType} </span> 
                    </Col> 
                  </Row> 
                  <Row style = {{paddingBottom: '10px'}} >
                    <Col span = {4} >
                      <span > 老人姓名: </span> 
                    </Col> 
                    <Col span = {20} >
                      <span > {data.fName} </span> 
                    </Col> 
                  </Row> 
                  <Row style = {{paddingBottom: '10px'}} >
                    <Col span = {4} >
                      <span > 详细地址: </span> 
                    </Col> 
                    <Col span = { 20} >
                      <span > {data.fAddress} </span> 
                    </Col> 
                  </Row> 
                  {
                    data.fState === 'a3eec264faeb4d95843ce0bd6268a162' || data.fState === '795b6e37d8fa45e489e8e8709865a131' || !data.fPhoto1  || !data.fPhoto2  ?  
                    <div>
                      <Row style = {{paddingBottom: '10px'}} >
                        {/* <span > 服务照片:暂无照片 </span>  */}
                        <Col span = {4} >
                          <span > 服务照片: </span> 
                        </Col> 
                        <Col span = {20} >
                          <span >暂无照片 </span> 
                        </Col> 
                      </Row>   
                    </div> : 
                    <div>
                      <Row style = {{paddingBottom: '10px'}} >
                        <span > 服务照片: </span> 
                      </Row> 
                      <Row style = {{paddingBottom: '10px'}} >
                        <div style = {{backgroundColor: '#D7D7D7',width: 140, height: 120, display: 'inline-block',marginRight: 30}} >
                          <img src = {`${data.fPhoto1}`} style = {{width: 140, height: 120}} /> 
                        </div> 
                        <div style = {{backgroundColor: '#D7D7D7',width: 140,height: 120,display: 'inline-block'}} >
                          <img src = {`${data.fPhoto2}`} style = {{width: 140,height: 120}} /> 
                        </div> 
                      </Row> 
                    </div>       
                  }
                  
                    <Row style = {{paddingBottom: '10px'}} >
                    <Col span = {4} >
                      <span > 服务人员: </span> 
                    </Col> 
                    <Col span = {20} >
                      <span > {data.fStaffName} </span> 
                    </Col> 
                  </Row> 
                  <Row style = {{paddingBottom: '10px'}} >
                    <Col span = {4} >
                      <span > 服务评价: </span> 
                    </Col> 
                    <Col span = {20} >
                      <span > {data.fStaffContent} </span> 
                    </Col> 
                  </Row> 
                  <Row style = {{paddingBottom: '10px'}} >
                    <Col span = {4} >
                      <span > 评价备注: </span> 
                    </Col> 
                    <Col span = {20} >
                      <span > {data.fRemarks} </span> 
                    </Col>
                  </Row> 
                  <Row style = {{paddingBottom: '10px'}} >
                    <Col span = {4} >
                      <span > 服务地点: </span> 
                    </Col> 

                    <Col span = {20} > {mapMarkers.length <= 0 ? '暂无打卡信息' :<Map mapCenter = { mapMarkers[0].position}mapMarker = { mapMarkers}/>} </Col> 
                  </Row> 
                  {/* <Row style = {{paddingBottom: '10px'}} >
                    <Col span = {4} >
                      <span > 备注: </span> 
                    </Col> 
                    <Col span = {20} >
                      < span > {data.fRemarks} </span> 
                    </Col> 
                  </Row>    */}
                </Card> 
              </Row> 
            </Modal>
        );
    }
}

function formatPosition(data, index) {
    try {
        let arr = data.split(',');
        return {
            position: {
                longitude: arr[1],
                latitude: arr[0],
                index: index
            }
        };
    } catch (error) {
        return {
            position: null
        }
    }
}

export default connect()(PersonalModal);